<template>
    <div id="app">
  
  <div class="aaa">
    <div class="dl"><h2 style="color:black">登录</h2> <el-divider class="xian"></el-divider></div>
    <div class="zh"><el-tag>账号</el-tag><el-input v-model="data.account" placeholder="请输入您的账号"></el-input></div>
   <div class="mm"><el-tag>密码</el-tag><el-input v-model="data.password" placeholder="请输入您的密码"></el-input></div>
 <el-button class="but" type="success" @click="events.logins">登录</el-button>
  </div>
  
  </div>
</template>


<script setup lang="ts">
import { ElLoading, ElMessage } from 'element-plus';
import {reactive} from 'vue'
import axios from 'axios'
import {logins} from "../../api/login"
import {close_loading,start_loading,notice} from '../../utils/notice'
import {set_token} from '../../utils/auth';
import router from '@/router';
const data = reactive<any>({
    account: '18570362574',
    password: '123456',
});

const events={
   async logins(){
 start_loading();
       if(data.account=="" || data.password==""){
      
        setTimeout(() => {
           ElMessage.error("账号和密码不能为空!!!");
        }, 1000);
        setTimeout(() => {
      close_loading();
     }, 1000);
     return;
       }
       const res=await logins({account:data.account,password:data.password});
      if(res.code===0){
        set_token(res.data);
        setTimeout(() => {
         notice(res);
         router.push('/');

       }, 1000);
      }
         setTimeout(() => {
      close_loading();
     }, 1000);
   
      
    }
}
</script>

<style scoped>
.aaa{
  margin: auto;
 
  width: 500px;
  height: 400px;
 position: relative;
 top: 200px;
  background-color: white;
border-radius: 3px;
background: rgba(209, 200, 200, 0.3);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
.dl{
  text-align:center;
  position: relative;
  top: 30px;
  
}
.xian{
  background:rgb(199, 194, 194);
}
.zh{
  margin-top: 50px;
  margin-left: 8px;
  margin-right: 8px;
}
.mm{
   margin-left: 8px;
  margin-right: 8px;
  margin-top: 40px;
}
.but{
  margin-top: 40px;
  width: 250px;
  margin-left: 125px;
}

body {
    padding: 0;
    margin: 0;
    background: white;
    
}
#app{
    height: 100vh;
    background-image: url(../../image/abcdef.jpg);
    background-size: cover;
}
</style>